<!--
 * @Description 
 * @Version 
 * @Author Dong
 * @Date 2021-03-08 14:05:39
 * @LastEditors Dong
 * @LastEditTime 2021-03-09 10:13:05
 * @FilePath \fed-e-task-04-06\code\work\src\app\app.component.html
-->
<div class="container">
  <div class="header">
    Angular TodoList
  </div>
  <div class="addTodo">
    <!-- 文本输入框 -->
    <input type="text" placeholder="add todo" #AddTodoInput>
    <!-- 文本添加按钮 -->
    <button #AddTodoButton>添加</button>
  </div>
  <!-- todo 列表 -->
  <div class="todos" @todoSlide>
    <div class="todo" *ngFor="let todo of todos | async" @slide>
      <div>
        <input 
          type="checkbox" 
          [value]="todo.value" 
          [checked]="todo.checked" 
          (change)="changeTodo($event, todo.id)"
        />{{ todo.value }}
      </div>
      <!-- 删除单个 todo -->
      <button (click)="deleteTodo(todo.id)" @slide>删除</button>
    </div>
    <div class="todo" @slide *ngIf="todoListNumber === 0">当前没有数据</div>
  </div>
</div>
<!-- <pre>
  {{ todos | async | json }}
</pre> -->